<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
	<div>
		<audio controls id="audioo">
			<source src="../img/5018.mp3">
		</audio>
	</div>
	<button class="ball" > play</button>

	<script type="text/javascript" charset="utf-8">
		//运动事件监听
		if (window.DeviceMotionEvent) {
		    window.addEventListener('devicemotion',deviceMotionHandler,false);
		}
		//获取加速度信息
		//通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率，进行设备是否有进行晃动的判断。
		//而为了防止正常移动的误判，需要给该变化率设置一个合适的临界值。
		var ball = document.querySelector('.ball');
		var payyv=document.getElementById('audioo')
		ball.onclick=function(){
			payyv.play()
		}
		var SHAKE_THRESHOLD = 4000;
		var last_update = 0;
		var x, y, z, last_x = 0, last_y = 0, last_z = 0;
		function deviceMotionHandler(eventData) {
				if (payyv.paused) {
						// alert('ok')
					    // 暂停中
	            		payyv.play()
				} else {
					    // 播放中
				}
				
		        var acceleration =eventData.accelerationIncludingGravity;
		        var curTime = new Date().getTime();
		        if ((curTime-last_update)> 10) {
		            var diffTime = curTime -last_update;
		            last_update = curTime;
		            x = acceleration.x;
		            y = acceleration.y;
		            z = acceleration.z;
		            var speed = Math.abs(x +y + z - last_x - last_y - last_z) / diffTime * 10000;
		            if (speed > SHAKE_THRESHOLD) {
		            	if (payyv.paused) {
						    // 暂停中
		            		payyv.pause()
						} else {
						    // 播放中
						}
		                // alert("你中奖啦！");  // Do something
		            }
		            last_x = x;
		            last_y = y;
		            last_z = z;
		        }
		}
		// function palying(){
		// 	payyv.play()
		// 	alert('pl')
		// }
	</script>
</body>
</html>